<template>
  <div
    class="body"
    ref="wrapper"
  >
    <div>
      <div class="area">
        <div class="title">当前城市</div>
        <div class="btn_list">
          <div class="btn_out">
            <div class="btn">{{this.currenCity}}</div>
          </div>
        </div>
      </div>
      <div class="area">
        <div class="title">热门城市</div>
        <div class="btn_list">
          <div
            class="btn_out"
            v-for="(item,index) of hotcity"
            :key="index"
          >
            <div
              class="btn"
              @click="chooseCity(item)"
            >{{item}}</div>
          </div>
        </div>
      </div>
      <div
        class="area"
        v-for="(item,key) of city"
        :key="key"
        :ref="item.title"
      >
        <div class="title">{{item.title}}</div>
        <div class="li_list">
          <div
            class="li"
            v-for="(innerItem,innerIndex) of item.lists"
            :key="innerIndex"
            @click="chooseCity(innerItem)"
          >{{innerItem}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import { mapState, mapMutations } from 'vuex'
export default {
  name: "CityList",
  props: {
    city: Array,
    hotcity: Array,
    letter: String
  },
  mounted() {
    this.scroll = new BScroll(this.$refs.wrapper)
  },
  computed: {
    ...mapState({
      currenCity: "city"
    })
  },
  methods: {
    // 城市选择
    chooseCity(city) {
      this.changeCity(city)
      this.$router.push("/")
    },
    ...mapMutations(["changeCity"])
  },
  watch: {
    // 右字母表变化筛选
    letter() {
      if (this.letter) {
        const ele = this.$refs[this.letter][0]
        this.scroll.scrollToElement(ele)
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~styles/variavle.styl'

.body 
  position absolute
  width 100%
  overflow hidden
  left 0
  right 0
  bottom 0
  top 1.4rem
  .area 
    font-size 0.3rem
    .title 
      background #eee
      text-indent 0.1rem
      padding 0.1rem
      &before 
        border 0.05rem solid #cccccc
      &after 
        border 0.05rem solid #cccccc
    .btn_list 
      width 100%
      overflow hidden
      box-sizing border-box
      padding 0.1rem 0.6rem 0.1rem 0.1rem
      .btn_out 
        width 33.33%
        float left
        .btn 
          border 0.02px solid #ccc
          box-sizing border-box
          margin 0.1rem
          padding 0.1rem 0
          text-align center
    .li_list 
      width 100%
      .li 
        line-height 0.64rem
        text-indent 0.2rem
        border-bottom 0.02rem solid #eee
</style>
